<template>
  <div class="container ml-3">
    <el-form  label-position="left" ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="报警输出号" label-width="120px">
          <select v-model="form.ioPort" placeholder="">
            <option v-for="item in alarmOutOptions" :key="item.portNo" :label="'A->' + item.portNo" :value="item.portNo"></option>
          </select>
        </el-form-item>
        <el-form-item label="报警延时" label-width="120px">
          <select v-model="form.delay" placeholder="">
            <option label="1秒" :value="1"></option>
            <option label="2秒" :value="2"></option>
            <option label="3秒" :value="3"></option>
            <option label="4秒" :value="4"></option>
            <option label="5秒" :value="5"></option>
            <option label="10秒" :value="10"></option>
            <option label="20秒" :value="20"></option>
            <option label="30秒" :value="30"></option>
            <option label="60秒" :value="60"></option>
            <option label="120秒" :value="120"></option>
            <option label="180秒" :value="180"></option>
            <option label="240秒" :value="240"></option>
            <option label="300秒" :value="300"></option>
            <option label="360秒" :value="360"></option>
          </select>
        </el-form-item>
      <el-form-item label="报警类型" label-width="120px">
          <select v-model="form.voltageType" placeholder="">
            <option label="低电平" :value="0"></option>
            <option label="高电平" :value="1"></option>
          </select>
        </el-form-item>

    </el-form>

    <div class="mt-4">
       <span class="border-[1px] !border-[#dfe4ed] p-1 px-[20px] py-[10px] leading-[40px] text-tw-primary font-bold">
         布防时间
       </span>
    </div>
    <timeChoose class="mt-4" :initialSchedule="schedule"
                ref="timeChoose"></timeChoose>
    <el-button id="submit" @click="save" class="!mt-8" type="primary" style="margin-left: 0px; width: 120px">保存</el-button>
  </div>
</template>

<script>
import timeChoose from '@/views/components/time.vue';
import {
  getAlarmInScheduleConfig,
  getAlarmOutConfig, getAlarmOutScheduleConfig,
  getNormalAlarmOutConfig, postAlarmInScheduleConfig, postAlarmOutConfig, postAlarmOutScheduleConfig,
  postNormalAlarmOutConfig
} from "@/api/api2";
export default {
  name: 'index',
  components: {
    timeChoose,
  },
  data() {
    return {
      title: "",
      open: false,
      schedule: [],
      alarmOutOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      radio: '1',
      // 表单参数
      form: {
        ioPort: null, // IO端口号
        voltageType: null, // 电压类型
        delay: null, // 延时
      },
      rules: {
      },
    }
  },
  watch: {
    // Watch for changes on the selected ioPort
    'form.ioPort'(newPortNo, oldPortNo) {
      console.log(newPortNo)
      // Find the corresponding alarm input configuration from our stored list
      const selectedOption = this.alarmOutOptions.find(item => item.portNo === newPortNo);
      if (selectedOption) {
        console.log(selectedOption)
        // Update the ioSwitchType in the form model
        this.form.voltageType = selectedOption.voltageType;
        this.form.delay = selectedOption.delay;
      }
    },

    'form.voltageType'(newvoltageType) {
      // Guard condition: Only proceed if there is a port selected.
      if (this.form.ioPort === null) {
        return;
      }

      // Find the object in the master array that corresponds to the currently selected port.
      const targetOption = this.alarmOutOptions.find(item => item.portNo === this.form.ioPort);

      // If we found the object and its type is different from the new type, update it.
      if (targetOption && targetOption.voltageType !== newvoltageType) {
        targetOption.voltageType = newvoltageType;
      }
    },

    'form.delay'(newdelay) {
      // Guard condition: Only proceed if there is a port selected.
      if (this.form.ioPort === null) {
        return;
      }

      // Find the object in the master array that corresponds to the currently selected port.
      const targetOption = this.alarmOutOptions.find(item => item.portNo === this.form.ioPort);

      // If we found the object and its type is different from the new type, update it.
      if (targetOption && targetOption.delay !== newdelay) {
        targetOption.delay = newdelay;
      }
    }
  },
  created() {
    let res =   {
      "code": 0,
      "msg": "ok",
      "data": {
        "enable": 0,
        "alarmOut": [
          {
            "portNo": 1,
            "voltageType": 0,
            "delay": 1,
          },
          {
            "portNo": 2,
            "voltageType": 1,
            "delay": 2,
          },
        ]
      }
    }
    getAlarmOutConfig().then(res => {
      if (res.code === 0 && res.data && res.data.alarmOut) {
        this.alarmOutOptions = res.data.alarmOut;
        this.form.enable = res.data.enable;
        if (this.alarmOutOptions.length > 0) {
          const firstOption = this.alarmOutOptions[0];
          this.form.ioPort = firstOption.portNo;
          this.form.voltageType = firstOption.voltageType;
          this.form.delay = firstOption.delay;
        }
    } else {
      this.$message.error("获取报警输入配置失败");
    }
    });
    getAlarmOutScheduleConfig().then(res => {
      if (res.code === 0) {
        this.schedule = res.data.daySchedules;
      } else {
        this.$message.error("获取配置失败");
      }
    })
  },
  methods: {
    save(){
      const payload = {
        enable: this.form.enable,
        alarmOut: this.alarmOutOptions // Send the entire list, which is now always correct.
      };
      postAlarmOutConfig(payload).then(res => {
        if (res.code === 0) {
          let form = this.$refs.timeChoose.form.scheduleAction;
          postAlarmOutScheduleConfig({
            type: 'alarmOut',
            daySchedules: form
          }).then(res => {
            if (res.code === 0) {
              this.$message.success("保存成功");
            } else {
              this.$message.error("保存失败");
            }
          })
        } else {
          this.$message({
            message: '保存失败',
            type: 'error'
          });
        }
      })
    },
  }
}
</script>

<style scoped>
.container {
  //margin-left: 15%;
  //margin-top: 5%;
}
.week-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  flex-direction: row;
}

.day-schedule {
  flex: 0 0 35%; /* Each .day-schedule will try to take up half the width of its container */
  max-width: 50%; /* Ensures that the .day-schedule does not exceed half the width */
  box-sizing: border-box;
}

.block {
  display: flex;
  margin-top: 10px;
}

@media (max-width: 600px) { /* Adjust the breakpoint as needed */
  .day-schedule {
    flex: 0 0 100%; /* On smaller screens, the .day-schedule will take the full width */
    max-width: 100%;
  }
}
.button {
  margin-left: 15%;
}
.el-form-item .el-form-item {
  margin-bottom: 10px;
}
select {
  width: 202px;
}


.title  {
  background-color: #F2F2F2;
  font-weight: 700;
  margin-top: 10px;
}

.title {
  background-color: #F2F2F2;
  font-weight: 700;
  padding-left: 15px;
  margin-top: 10px;
  margin-bottom: 5px;
}
.title {
  height: 30px;
  line-height: 30px;
}
</style>
